<!--
 * @Author: your name
 * @Date: 2021-03-29 09:03:28
 * @LastEditTime: 2021-04-25 09:13:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \active-front\src\components\Hotevents\index.vue
-->
<template>
  <div>
    <span style="font-size: 26px">历史活动</span>
    <div align="right">
      <el-input
        placeholder="请输入要搜索的活动名称"
        style="width: 25%"
        v-model="state"
        clearable
      >
      </el-input>
      <el-button type="primary" icon="el-icon-search" @click="search"
        >搜索</el-button
      >
    </div>
    <el-table
      ref="filterTable"
      :data="tableData"
      style="width: 100%; table-layout: fixed"
      :header-cell-style="header_align"
      :cell-style="cell_align"
      :row-class-name="tableRowClassName"
      :row-key="row => row.id"
      v-loading="loadingTable"
    >
      >
      <el-table-column label="状态" sortable column-key="id">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.flag === 0 ? 'danger' : 'success'"
            disable-transitions
          >
            {{ scope.row.flag === 0 ? "已关闭报名" : "报名进行中" }}
          </el-tag>
          <!-- 左侧线条 -->
          <div
            :class="scope.row.confirm === 0 ? 'typeRed type' : 'typeGreen type'"
            :key="timeDel[scope.$index]"
          ></div>
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="活动主题" width="280">
        <template slot-scope="scope">
          <div style="font-weight: 900" @click="handleClick(scope.row)">
            <el-link type="primary">{{ scope.row.name }}</el-link>
          </div>
          <div
            style="
              width: 100%;
              word-break: keep-all;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
          >
            {{ scope.row.detail }}
          </div>
        </template>
      </el-table-column>
      <!--      <el-table-column prop="createDate" label="活动开始时间" width="180">-->
      <!--      </el-table-column>-->
      <el-table-column prop="college" label="学院"> </el-table-column>
      <el-table-column label="面向对象">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.scope === 1 ? '' : 'success'"
            disable-transitions
          >
            {{ scope.row.scope === 1 ? "学院内部" : "学校内部" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="deadline" label="截至倒计时">
        <template slot-scope="scope">
          <CountDownIndex
            :time="scope.row.deadline"
            paramsStyle="center"
            @timeEnd="() => timeEnd(scope.$index)"
          />
        </template>
      </el-table-column>
      <!--      管理员-->
      <el-table-column prop="stock" label="确认人数/已报名" v-if="superflag">
        <template slot-scope="scope">
          <div :style="scope.row.stock < 5 ? 'color:#f56c6c' : 'color:#67c23a'">
            {{
              scope.row.number === -1
                ? "不限额"
                : scope.row.confirmNum +
                  "/" +
                  (scope.row.number - scope.row.stock)
            }}
          </div>
        </template>
      </el-table-column>
      <!--      普通人数-->
      <el-table-column prop="createDate" label="报名时间" v-if="userflag">
      </el-table-column>
      操作页面

      <!--      普通用户操作页面-->
      <el-table-column
        prop="tag"
        label="操作"
        width="150"
        filter-placement="bottom-end"
        v-if="userflag"
      >
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">
            查看详情
          </el-button>
          <el-tag
            :type="scope.row.confirm === 0 ? 'danger' : 'success'"
            disable-transitions
          >
            {{ scope.row.confirm === 0 ? "等待管理员确认" : "管理员已确认" }}
          </el-tag>
        </template>
      </el-table-column>

      <!--      管理员用户操作-->
      <el-table-column
        prop="tag"
        label="操作"
        width="150"
        filter-placement="bottom-end"
        v-if="superflag"
      >
        <template slot-scope="scope">
          <el-button
            @click="findEnrollUsers(scope.row)"
            type="text"
            size="small"
          >
            <!--            :disabled="timeDel[scope.$index] === false"-->
            查看报名
          </el-button>
          <el-button @click="ActivelyDeta(scope.row)" type="text" size="small">
            <!--            :disabled="timeDel[scope.$index] === false"-->
            修改活动信息
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页按钮 -->
    <el-pagination
      style="margin-top: 10px"
      background
      layout="prev, pager, next"
      :page-size="6"
      :total="total"
      @current-change="curPage"
    >
    </el-pagination>
  </div>
</template>

<script>
import eventsApi from "../../../api/HotEvent";
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      state: "",
      userflag: false,
      superflag: false,
      tableData: [],
      //外层
      outerVisible: false,
      //内层
      innerVisible: false,
      //详情活动id
      id: "",
      timeDel: { 0: true },
      loading: false,
      total: 0,
      loadingTable: false,
      pageNum: 1,
      pageSize: 10
    };
  },
  props: {
    title: {
      type: String
    },
    apiName: {
      type: String
    }
  },
  methods: {
    // 管理员跳转到活动修改
    ActivelyDeta(row) {
      this.$router.push({
        path: "/info/personal/activelydetail",
        query: {
          id: row.id
        }
      });
    },
    // 搜索框
    async search() {
      const data = await eventsApi.searchActives({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        info: this.state
      });
      this.tableData = this.transTime(data.list);
    },
    formatter(row, column) {
      return row.address;
    },
    //转换时间戳
    timeChange(time) {
      var date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m =
        date.getMinutes() < 10
          ? "0" + date.getMinutes() + ":"
          : date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    //查看详情弹框
    handleClick(row) {
      this.$router.push({
        path: `/info/activity/${row.id}`
      });
      this.id = row.id;
      this.row = row;
    },

    // 看看报名人数
    findEnrollUsers(row) {
      this.id = row.id;
      console.log(this.id);
      console.log(this.pageNum);
      console.log(this.pageSize);
      const data = {
        id: this.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        name: row.name
      };
      localStorage.setItem("params", JSON.stringify(data));
      this.$router.push({
        path: "/info/personal/findenrolluser",
        params: {
          id: this.id,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      });
    },

    //报名
    signUp(row) {
      console.log("报名", row);
      const user = JSON.parse(localStorage.getItem("sy"));
      this.$confirm(
        `${user.name} 同学, 是否要报名${row.name ? row.name : this.row.name}?`,
        "报名",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(async () => {
          const loading = this.$loading({
            lock: true,
            text: "加急报名中!!!",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          //发请求
          let time = setTimeout(() => {
            this.$message({
              type: "error",
              message: "报名接口暂时关闭! 请联系管理员"
            });
            loading.close();
          }, 5000);
          const { code } = await eventsApi.activeEnroll({
            uid: row.id ? row.id : this.row.id
          });
          if (code === 0) {
            this.$message({
              type: "success",
              message: "报名成功!"
            });
            loading.close();
            location.reload([true]);
          } else {
            this.$message({
              type: "error",
              message: "报名失败! 请联系管理员"
            });
            loading.close();
          }
          clearTimeout(time);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消报名"
          });
        });
    },
    loadingToggle() {
      this.loading = !this.loading;
    },
    //判断时间是否到了
    timeEnd(index) {
      this.timeDel[index] = false;
    },
    //将时间戳转换成时间
    transTime(times = []) {
      let data = times;
      data.map((item, index) => {
        item.createDate = this.timeChange(item.createDate);
        item.deadline = this.timeChange(item.deadline);
        if (item.createDate == item.deadline) {
          this.timeDel[index] = false;
        } else {
          this.timeDel[index] = true;
        }
        // //只保留2个tag
        // if (item.types && item.types.length == 3) {
        //   item.types = item.types.splice(item.types.length - 1, 1);
        // }
        //设置时间结束全部为true，未结束
      });
      return data;
    },
    //设置列表行样式
    tableRowClassName() {
      // { row, rowIndex }
      //  暂时不弄吧
      return "aaa";
    },
    //当前页
    async curPage(val) {
      // 此处是改动的数据
      // const data = await eventsApi[this.apiName ? this.apiName : "HotEvents"]({
      //   pageNum: val
      // });
      const data = await eventsApi.userActiveList({
        pageNum: val
      });
      console.log("分页111", data);
      let that = this;
      this.loadingTable = true;
      that.tableData = that.transTime(data.list);
      that.loadingTable = false;
    },
    //返回一个字符来逃避类型检测
    cell_align: () => "text-align:center;position: relative;height:100px",
    header_align: () => "text-align:center;",
    ...mapMutations(["activeIndexUpdate", "navmenuIndexUpdate"])
  },
  created() {
    this.activeIndexUpdate("/info/personal");
    this.navmenuIndexUpdate("/info/personal/signedup");
  },
  async mounted() {
    // const data = await eventsApi[this.apiName ? this.apiName : "HotEvents"]();
    const id = this.$route.query.id;
    const data = await eventsApi[
      id === undefined ? "userActiveList" : "getUserActivesByAid"
    ](id);
    this.pageNum = data.pageNum;
    this.pageSize = data.pageSize;
    const flag = JSON.parse(localStorage.getItem("sy"));
    if (flag.roleId < 3) {
      this.superflag = true;
      this.userflag = false;
    } else {
      this.userflag = true;
      this.superflag = false;
    }
    console.log("活动", data);
    this.total = data.total;
    this.tableData = this.transTime(id ? data : data.list);
  }
};
</script>

<style scoped>
.el-menu-demo {
  border-bottom-color: #ffffff !important;
  font-size: 16px;
}
.tag {
  position: absolute;
  font-size: 12px;
  bottom: 0;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
a {
  text-decoration: none;
  outline: none;
}
/* 圆点 */
.type {
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.typeGreen {
  border: 1px solid #67c23a;
  background-color: #67c23a;
}
.typeGrey {
  border: 1px solid #c0c4cc;
  background-color: #c0c4cc;
}
.typeRed {
  border: 1px solid #f56c6c;
  background-color: #f56c6c;
}
.el-form-item {
  margin-bottom: 0;
}
.el-table .aaa {
  background: #f56c6c;
}
</style>
